<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>统一认证页面</title>
</head>
<body>
<h2>demo3 的统一认证页面</h2>
<small>
    <b>未登录时，访问任何地址（登录/注册/退出登录等页面除外）均会自动跳转到本页面，<a href="index.html">访问主页 index.html 试试</a>，发现只有登录成功后才能打开~</b><br>
    如何自定义登录页面？<br>
    方式1： 在项目目录工程的静态资源路径中添加名称为 signIn.html 的 html；<br>
    方式2： 修改 shoulder.security.browser.signInPage=xxx.html，然后在资源路径中添加 xxx.html<br>
</small>

<h3>用户名密码登录示例</h3>
<small>
    （该认证方式框架为 spring-security 中提供的，即默认从 UserDetailService#loadUserByUsername 中取用户信息。<br>
    demo3中的实现是通过查数据库 user 表。见 UserServiceImpl）<br>
    注：data.sql 中默认插入的数据的密码均为 shoulder
</small>
<form action="/authentication/form" method="post">
    <table>
        <tr>
            <td>用户名:</td>
            <td><input name="username" type="text" value="shoulder"></td>
        </tr>
        <tr>
            <td>密码（默认 shoulder）:</td>
            <td><input name="password" type="password" value="shoulder"></td>
        </tr>
        <tr>
            <td>图形验证码:</td>
            <td>
                <input name="imageCode" type="text">
                <img src="/code?type=imageCode" onclick="this.src=this.src+'&k='+Math.random();">
                <small>(`pom.xml` 引入 `learn-security-starter-code` 后，表单登录在后端校验时默认必须填正确的验证码才能成功登录。去 pom.xml 试试吧)<br>
                    默认情况下，仅表单登录请求需要图片验证码，可通过修改 "shoulder.security.validate-code.image.urls" 来修改/新增需要校验的路径
                </small>
            </td>
        </tr>
        <tr>
            <td colspan='2'>
                <!-- name 固定，spring-security 定义 -->
                <input name="remember-me" type="checkbox" value="true"/>记住我
                <small>（勾选该项后，即使关闭浏览器，在1个月内，不必认证也可以直接访问，即自动登录，勾上然后重启服务器测试一下吧~ ）</small>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit">登录</button>
            </td>
        </tr>
    </table>
</form>

<h3>短信登录</h3>
<small>(`pom.xml` 引入 `learn-security-starter-code` 后，支持短信验证码登录)
</small>
<form action="/authentication/sms" method="post">
    <table>
        <tr>
            <td>手机号:</td>
            <td><input name="phoneNumber" type="text" value="13012345678"></td>
        </tr>
        <tr>
            <td>短信验证码:</td>
            <td>
                <input name="smsCode" type="text">
                <button onclick="sendSmsCode()" type="button">发送验证码</button>
            </td>
        </tr>
        <tr>
            <td colspan='2'><input name="remember-me" type="checkbox" value="true"/>记住我</td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit">登录</button>
            </td>
        </tr>
    </table>
</form>
<br>
<h3>社交登录</h3>
<a href="/auth/qq" style="opacity: 0.4" onclick="alert('demo中暂未实现')">QQ登录</a>

<a href="/auth/weixin" style="opacity: 0.4" onclick="alert('demo中暂未实现')">微信登录</a>
</body>
<script>
    // 发送短信验证码
    function sendSmsCode() {
        var url = "http://locahost:8080"
        var request = new XMLHttpRequest();
        request.open("POST", "/code?type=smsCode&phoneNumber=13012345678");
        request.send("F")
    }
</script>
</html>